<template>
  <div class="s-serch">
    <div class="serchboxs">
      <div class="choose-title">查询条件</div>
      <div class="choose-content">
        <div class="choose-item">
          <b>资源分类:</b>
          <p>
            <span :class="{ act: parms.zyflValue == index }" @click="change('zyflValue', index)" v-for="(d, index) in state.zyfl" :key="d.id">{{ d.name }}</span>
          </p>
        </div>
        <div class="choose-item">
          <b>提供方式:</b>
          <p>
            <span :class="{ act: parms.tgfsValue == index }" @click="change('tgfsValue', index)" v-for="(d, index) in state.tgfs" :key="d.id">{{ d.name }}</span>
          </p>
        </div>
        <div class="choose-item">
          <b>搜索领域:</b>
          <p>
            <span :class="{ act: parms.sslyValue == index }" @click="change('sslyValue', index)" v-for="(d, index) in state.ssly" :key="d.id">{{ d.name }}</span>
          </p>
        </div>
        <div class="choose-item">
          <b>开发条件:</b>
          <p>
            <span :class="{ act: parms.kftjValue == index }" @click="change('kftjValue', index)" v-for="(d, index) in state.kftj" :key="d.id">{{ d.name }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="serchcontent">
      <div class="ctitle">
        共有
        <span>{{ totleNum }}</span>
        个资源
      </div>
      <div class="serchlist-content">
        <DataRihghtList :data="state.dataList" />
        <el-pagination @current-change="handleCurrentChange" :current-page="parms.pageNum" :page-size="parms.pageSize" layout="prev, pager, next, jumper" :total="totleNum" background></el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup>
import DataRihghtList from "@/components/pc/DataDirectory/DataRihghtList.vue";
import { ref, reactive, onMounted, inject, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, onBeforeRouteLeave } from "vue-router";
const http = inject("ajax");
const routeContent = useRoute();

const dialogVisible = ref(false);

// 添加一个导航守卫，在当前组件将要离开时触发。
onBeforeRouteLeave((to, from, next) => {
  setTimeout(() => {
    ElMessage("欢迎下次来搜索资源");
    next();
  });
});

const parms = reactive({
  zyflValue: null,
  tgfsValue: null,
  sslyValue: null,
  kftjValue: null,
  pageSize: 5,
  pageNum: 1,
});
let state = reactive({
  zyfl: [
    { name: "全部", id: 1 },
    { name: "主题资源", id: 2 },
    { name: "部门资源", id: 3 },
    { name: "县区资源", id: 4 },
  ],
  tgfs: [
    { name: "全部", id: 1 },
    { name: "文件", id: 2 },
    { name: "API服务", id: 3 },
    { name: "数据集", id: 4 },
  ],
  ssly: [
    { name: "全部", id: 1 },
    { name: "安全生产", id: 2 },
    { name: "财税金融", id: 3 },
    { name: "城建住房", id: 4 },
    { name: "地理空间", id: 5 },
    { name: "工业农业", id: 6 },
    { name: "机构团体", id: 7 },
    { name: "教育文化", id: 8 },
    { name: "交通运输", id: 9 },
    { name: "社保就业", id: 10 },
    { name: "社会救助", id: 11 },
    { name: "生活服务", id: 12 },
    { name: "生态环境", id: 13 },
    { name: "市场监管", id: 14 },
    { name: "信用服务", id: 15 },
    { name: "医疗卫生", id: 16 },
    { name: "资源能源", id: 17 },
    { name: "旅游休闲", id: 18 },
    { name: "政务服务", id: 19 },
    { name: "科技创新", id: 20 },
    { name: "法律服务", id: 21 },
    { name: "商贸流通", id: 22 },
    { name: "气象服务", id: 23 },
  ],
  kftj: [
    { name: "全部", id: 1 },
    { name: "有条件开放", id: 2 },
    { name: "无条件开放", id: 3 },
  ],
  dataList: [],
});

const totleNum = ref(0);

const change = (d, index) => {
  if (d && parms[d] != index) {
    parms[d] = index;
    getDate();
  }
};
onMounted(() => {
  parms.keyWord = routeContent.query.title;
  getDate();
});
const getDate = () => {
  http("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/dataPool/dataPoolPager", parms, "post")
    .then(res => {
      state.dataList = res.data.rows;
      totleNum.value = res.data.total;
    })
    .catch(err => {
      console.log(err.message || "数据异常");
    });
};
const handleCurrentChange = val => {
  su.scroll.scrollTop();
  parms.pageNum = val;
  getDate();
};

watch(
  () => routeContent.query,
  (newValue, oldValue) => {
    console.log(routeContent.path);
    if (routeContent.path == "/serch") {
      parms.keyWord = newValue.title;
      parms.pageNum = 1;
      getDate();
    }
  },
  {
    // immediate: true, //默认执行一次，这里不需要
    // deep: true, //默认执行一次，这里不需要
  }
);
</script>
